<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>教师问答</title>
<link rel="stylesheet" href="${BasePath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${BasePath}/css/bootstrap-pager.css">
<link rel="stylesheet" href="${BasePath}/css/common.css?v=${cssVersion}">
<style>
.table tbody tr td{
    vertical-align: middle;
}
span{
margin:0 50px 0 0;
font-size: 14px;
}
.black_overlay{ 
    display: none; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.80; 
    filter: alpha(opacity=88); 
} 
.white_content { 
    display: none; 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    width: 55%; 
    height: 55%; 
    padding: 20px; 
    border: 4px solid orange; 
    background-color: white; 
    z-index:1002; 
    overflow: auto; 
}

</style>
</head>
<body>
	<div class="panel panel-default">
		<div class="panel-heading">
	        <h3 class="panel-title"> <strong>${teacher.nickName}</strong> 的问答列表</h3>
	    </div>
	    <div class="panel-body">
	    	<div id="container">
		    <table class="table table-bordered table-hover table-condensed">
				<thead>
					<tr>
					<th>用户</th>
					<th>问题标题</th>
					<th>问题描述</th>
					<th>创建时间</th>
					<th>是否精选</th>
					<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<#list page.list as q>
					<tr>
						<td>${(q.nickName)!''}</td>
						<td>${(q.title)!''}</td>
						<td>${(q.descr)!''}</td>
						<td>${q.createTime?number_to_datetime!''}</td>
						<#if q.isChoice == 1>
						<td id="isChoice${q.id}">是</td>
						<#else>
						<td id="isChoice${q.id}">否</td>
						</#if>
						<td>
							<button qid="${q.id}" class="btn btn-info setChoice">设为精选</button>
							<button qid="${q.id}" class="btn btn-info cancelChoice">取消精选</button>
							<#if q.queState == 0>
							<button qid="${q.id}" class="btn btn-info viewAnswer" disabled>查看答案</button>
							<#else>
							<button qid="${q.id}" class="btn btn-info viewAnswer">查看答案</button>
							</#if>
							
						</td>
					</tr>
					</#list>
				</tbody>
			</table>
		</div>
		<div id="page-container-static-big" style="text-align: center;">
			<ul id="pageLimit"></ul>
		</div>
		<div id="light" class="white_content" align="center">
			<div id="msg" style="width:80%;margin:0 40px 40px 40px;font-size:16px;"></div>
			<button class="btn btn-info" onclick = "closeDialog()" style="position:relative;">关闭</button>
		</div>
		<div id="fade" class="black_overlay"></div>
		
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog modal-lg">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title">课程内容</h4>
		            </div>
		            <input type="hidden" id="modalCid">
		            <div class="modal-body">
		            	<textarea id="contentText" rows="12" class="form-control"></textarea>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn btn-primary" id="saveContent">保存修改</button>
		            </div>
		        </div>
		    </div>
		</div>
	    </div>
	    <div class="prompt"></div>
	</div>
	<script type="text/javascript" src="${BasePath}/js/jquery-3.3.1.min.js"></script>  
	<script type="text/javascript" src="${BasePath}/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${BasePath}/js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="${BasePath}/js/bootstrap-pager.js"></script>
	<script type="text/javascript" src="${BasePath}/js/common-func.js?v=${jsVersion}"></script>
	<script type="text/javascript" src="${BasePath}/js/ajaxHeader.js?v=${jsVersion}"></script>
	<script>
	var curContentEditBtn = null;
	//禁用返回
    window.history.pushState(null, null, "#");
	window.addEventListener("popstate", function(e) {
		window.history.pushState(null, null, "#");
	});
	
	var answers = {};
	var teacherId = ${teacher.id};
	var totalPages = ${page.pages};
	
	if(totalPages <= 0){
		prompt($(".prompt"), '未查询到当前教师公开问题！');
	}
	var pageSize = ${page.pageSize};
	var currentPage = totalPages > 0 ? 1:0;
	var pagePlugin = $('#pageLimit').bootstrapPaginator({
		currentPage: currentPage,
		totalPages: totalPages,
		size:"big",
		bootstrapMajorVersion: 3,
		alignment:"right",
		numberOfPages: pageSize,
		itemTexts: function (type, page, current) {
			switch (type) {
			case "first": return "首页";
			case "prev": return "上一页";
			case "next": return "下一页";
			case "last": return "末页";
			case "page": return page;
			}//默认显示的是第一页。
		},
		//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
		onPageClicked: function (event, originalEvent, type, page){
			if(currentPage == page) return;
			else currentPage = page;
			
			var params = {
				memberId: teacherId,
				pageNum: page, 
				pageSize: pageSize 
			};
			var req = {requestData: JSON.stringify(params)};
			$.ajax({
				url: "${BasePath}/api/question/teacherPublic",
				type:'POST',
				contentType : "application/json; charset=utf-8",
				data: JSON.stringify(req),
				dataType:'json',
				success:function (data) {
					if(data == null || data.code != 200){
						alert("没有数据")
						return;
					}
					
					var questions = JSON.parse(data.responseData);
					
					var domHtml = getQuestionsDom(questions);
					$('tbody').html(domHtml);
					
					regAuditEvents();
				}
			});
		}
	});
	
	function openDialog(){
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block'
    }
    function closeDialog(){
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none'
    }
    
    function showMsg(msg){
  		$("#msg").html(msg);
  		openDialog();
  	}
    
	$(document).ready(function(){
		$('#myModal').modal('hide');
		regAuditEvents();
	});
	
	function setChoice(qid, choosed){
		var params = {questionId: qid};
		var req = {requestData: JSON.stringify(params)};
		var ret = false;
		var url = "${BasePath}/api/question/setChoice";
		if(!choosed) url = "${BasePath}/api/question/cancelChoice";
		$.ajax({
			url: url,
			type:'POST',
			contentType : "application/json; charset=utf-8",
			data: JSON.stringify(req),
			dataType:'json',
			async: false,
			success:function (data) {
				console.log("data=" + JSON.stringify(data));
				if(data == null){
					console.log("没有数据");
				}
				else{
					if(data.code == 200) ret = Boolean(data.responseData);
				}
			}
		});
		return ret;
	}

	function getAnswer(qid){
		var params = {questionId: qid};
		var req = {requestData: JSON.stringify(params)};
		var ret = {};
		var url = "${BasePath}/api/answer/show";
		$.ajax({
			url: url,
			type:'POST',
			contentType : "application/json; charset=utf-8",
			data: JSON.stringify(req),
			dataType:'json',
			async: false,
			success:function (data) {
				if(data == null){
					console.log("没有数据");
				}
				else{
					if(data.code == 200) ret = JSON.parse(data.responseData);
				}
			}
		});
		return ret;
	}
	
	function regAuditEvents(){
		
		//设为精选
		$(".setChoice").click(function(){
			var qid = $(this).attr("qid");
			
			var dom = $("#isChoice"+qid);
			if(dom.html() == '否'){
				//设为精选
				var ret = setChoice(qid, true);
				if(ret){
					dom.html("是");
					alert("操作成功")
				}
				else{
					alert("操作失败")
				}
			}
			else{
				console.log("操作无效")
			}
		});
		
		//取消精选
		$(".cancelChoice").click(function(){
			var qid = $(this).attr("qid");
			var dom = $("#isChoice"+qid);
			if(dom.html() == '是'){
				//取消精选
				var ret = setChoice(qid, false);
				if(ret){
					dom.html("否");
					alert("操作成功")
				}
				else{
					alert("操作失败")
				}
			}
			else{
				console.log("操作无效")
			}
		});
		
		$(".viewAnswer").click(function(){
			var qid = $(this).attr("qid");
			if(!answers[qid+'']){
				var answer = getAnswer(qid);
				answers[qid+''] = answer;
				showMsg(answer.content);
			}
			else{
				showMsg(answers[qid+''].content);
			}
		});
		
	}
	
	//获取question列表的dom
	function getQuestionsDom(questions){
		if(!questions || questions.length == 0) return '';
		
		var dom = '';
		for(var i = 0; i < questions.length; ++i){
			dom += getQuestionDom(questions[i]);
		}
		return dom;
	}
	
	//获取一个question的dom
	function getQuestionDom(q){
		if(!q) return '';
		
		if(!q.nickName) q.nickName = '';
		if(!q.title) q.title = '';
		if(!q.descr) q.descr = '';
		if(!q.isChoice) q.isChoice = 0;
		
		var tDom = '<tr>\r\n';
		
		tDom += '<td>' + q.nickName + '</td>\r\n';
		tDom += '<td>' + q.title + '</td>\r\n';
		tDom += '<td>' + q.descr + '</td>\r\n';
		
		var timeStr = (!!q.createTime)?time2DateTimeStr(q.createTime):'';
		tDom += '<td>' + timeStr + '</td>\r\n';
		
		if(q.isChoice == 1) tDom += '<td id=\"isChoice' + q.id + '\">是</td>\r\n';
		else tDom += '<td id=\"isChoice' + q.id + '\">否</td>\r\n';
		
		tDom += '<td>'; 
		
		tDom += '<button qid=\"' + q.id +'\" class=\"btn btn-info setChoice\">设为精选</button>\r\n';
		tDom += '<button qid=\"' + q.id +'\" class=\"btn btn-info cancelChoice\">取消精选</button>\r\n';
		
		if(q.queState == 0){
			tDom += '<button qid=\"' + q.id +'\" class=\"btn btn-info viewAnswer\" disabled>查看答案</button>\r\n';
		}
		else{
			tDom += '<button qid=\"' + q.id +'\" class=\"btn btn-info viewAnswer\">查看答案</button>\r\n';
		}
		
		tDom += '</td>\r\n';
	
		tDom += '</tr>\r\n';
		return tDom;
	}
	
	</script>
</body>
</html>